import { ScrollView, View } from "@tarojs/components";
import { ReactNode } from "react";

type TreeMenuProps = {
  list: any[];
  active?: any;
  valueKey?: string;
  labelKey?: string;

  center?: boolean;
  checked?: boolean;
  showCheckbox?: boolean;

  renderItem?: (e: any, index: number) => ReactNode;
  onClick?: (index: number, data: any) => void;
};

export default ({
  active,
  list,
  valueKey,
  labelKey,
  center,

  onClick,
  renderItem,
}: TreeMenuProps) => {
  return (
    <ScrollView scroll-y className="h-full bg-[#f1f3f8]">
      {list.map((item, index) => (
        <View
          key={valueKey ? item[valueKey] : index}
          className={`min-h-[100px] flex items-center ${
            center ? "justify-center" : ""
          } text-sm px-2 ${
            (valueKey ? item[valueKey] : index) === active
              ? "bg-[#23252a] text-white"
              : ""
          } border-t border-line-light`}
          onClick={() => onClick?.(index, item)}
        >
          {renderItem
            ? renderItem(item, index)
            : labelKey || valueKey
            ? item[labelKey ?? (valueKey as string)]
            : index}
        </View>
      ))}
    </ScrollView>
  );
};
